<template>
  <div>
    <!-- 顶部 -->
    <div class="topCon dis">
      <div class="dataItem dis">
        <span>用户数量</span>
        <div>
          <span>{{ totalUserNum }}</span>人
        </div>
        <img src="../assets/img1.png" alt="" class="bigImg">
      </div>
      <div class="dataItem dis">
        <span>订单总额</span>
        <div>
          ￥<span>{{ orderTotal.toFixed(2) }}</span>元
        </div>
        <img src="../assets/img2.png" alt="" class="smallImg">
      </div>
      <div class="dataItem dis">
        <span>订单总数</span>
        <div>
          <span>{{ orderNum }}</span>单
        </div>
        <img src="../assets/img1.png" alt="" class="bigImg">
      </div>
      <div class="dataItem dis">
        <span>今日订单总额</span>
        <div>
          ￥<span>{{ todayOrderTotal || 0 }}</span>元
        </div>
        <img src="../assets/img3.png" alt="" class="smallImg">
      </div>
      <div class="dataItem dis">
        <span>今日订单总数</span>
        <div>
          <span>{{ todayOrderNum }}</span>单
        </div>
        <img src="../assets/img1.png" alt="" class="bigImg">
      </div>
      <div class="dataItem dis">
        <span>累计消耗积分</span>
        <div>
          <span>{{ usedScore || 0 }}</span>分
        </div>
        <img src="../assets/img2.png" alt="" class="bigImg">
      </div>
      <div class="dataItem dis">
        <span>剩余总积分</span>
        <div>
          <span>{{ remainScore || 0 }}</span>分
        </div>
        <img src="../assets/img2.png" alt="" class="bigImg">
      </div>
      <div class="dataItem dis">
        <span>剩余总余额</span>
        <div>
          <span>{{ usedMoney || 0 }}</span>分
        </div>
        <img src="../assets/img2.png" alt="" class="bigImg">
      </div>
    </div>
    <div class="mainCon">
      <div class="leftCon">
        <!-- 订单图表 -->
        <div class="orderBox">
          <div class="echartsTop">
            <span>订单统计</span>
            <div class="dis">
              <span @click="selectHandle('order', 0)" :class="orderFlag == 0 ? 'activeSpan' : ''">本周</span>
              <span @click="selectHandle('order', 1)" :class="orderFlag == 1 ? 'activeSpan' : ''">本月</span>
              <!-- <span :class="orderFlag == 2 ? 'activeSpan' : ''">本年</span> -->
            </div>
          </div>
          <div id="orderCon"></div>
        </div>
        <div class="userBox">
          <div class="echartsTop">
            <span>用户统计</span>
            <div class="dis">
              <span @click="selectHandle('user', 0)" :class="userFlag == 0 ? 'activeSpan' : ''">本周</span>
              <span @click="selectHandle('user', 1)" :class="userFlag == 1 ? 'activeSpan' : ''">本月</span>
              <!-- <span :class="userFlag == 2 ? 'activeSpan' : ''">本年</span> -->
            </div>
          </div>
          <div id="userCon"></div>
        </div>
      </div>
      <div class="rightCon">
        <div class="messageBox">
          <div class="messTop">厂商信息</div>
          <div class="messTab">
            <el-table :data="factoryInfoList" style="width: 100%;" height="300" :header-cell-style="{ background: '#F8FAFB', color: '#666' }">
              <el-table-column prop="name" label="厂商名称"></el-table-column>
              <el-table-column prop="value" label="累计销量" width="120" align="center"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="saleBox">
          <div class="messTop">销量分类</div>
          <div id="saleCon"></div>

        </div>
        <div class="orderListBox">
          <div>订单动态</div>
          <div v-for="(item, index) in orderListAll" :key="index">
            <span></span>{{ item.orderDate }}，用户{{ item.customerName }}提交了{{ item.realMoney.toFixed(2) }}元的订单
          </div>
        </div>
      </div>
    </div>

    <!-- 申请弹窗 -->
    <el-dialog title="申请处理" :visible.sync="applyDia" width="30%" :before-close="closeApplyDialog">
      <div class="tipBox">
        <span> 邀请总人数：<span>{{ userTotal }}</span> 人</span>
        <span> 邀请会员人数：<span>{{ userVipTotal }}</span> 人</span>
      </div>
      <el-table :data="applyUserList" border style="width: 100%">
        <el-table-column prop="userName" label="名称"></el-table-column>
        <el-table-column prop="createTime" label="邀请时间"></el-table-column>
        <el-table-column label="会员等级">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.vipLevel != 0">VIP{{ scope.row.vipLevel }}</el-tag>
            <el-tag type="warning" v-else>未开通会员</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeApplyDialog">取 消</el-button>
        <el-button type="primary" @click="submitApply">通 过</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import * as echarts from "echarts";
import { applyPromoter, PromoterDownApply, listMyUser } from '../network/saleuser'

import { getHomeData, getHomeDataOrderMonth, getHomeDataUserMonth,getSalesByFactoryId} from '../network/pc'
export default {
  data() {
    return {
      orderFlag: 0,  // 0 周 1 月
      userFlag: 0,
      usedScore:0,//累计使用积分数
      totalUserNum: 0,// 用户数量
      orderTotal: 0,// 订单总额
      orderNum: 0,// 订单总数
      todayOrderNum: 0,// 今日订单总数
      todayOrderTotal: 0,// 今日订单总额
      orderListAll: [],//全部订单
      rateVo: [],//分类数据
      promoUserListAll: [],//消息列表
      usedMoney: 0,//剩余总余额
      remainScore: 0,//剩余总积分


      orderWeekEchartsData: {
        xData: [1, 2, 3, 4, 5, 6, 7],
        yData: [12, 24, 23, 66, 11, 90, 86],
      },
      userWeekEchartsData: {
        xData: [1, 2, 3, 4, 5, 6, 7],
        yData1: [12, 24, 23, 66, 11, 90, 86],
        yData2: [2, 4, 3, 6, 1, 9, 6],
        yData3: [42, 14, 21, 26, 31, 50, 76],
      },
      orderMonthEchartsData: {
        xData: [],
        yData: [],
      },
      userMonthEchartsData: {
        xData: [],
        yData1: [],
        yData2: [],
        yData3: [],
      },

      applyDia: false,
      applyFrom: {
        userId: 0,
        applyId: 0,
        companyId: 0,
      },
      applyUserList: [],//邀请的人
      userTotal: 0,
      userVipTotal: 0,
      factoryInfoList:[],


    };


  },
  mounted() {
    // this.getOrderEchart('orderCon', this.orderWeekEchartsData)
    // this.getUserEchart('userCon', this.userWeekEchartsData)
    // this.getSaleCharts('saleCon', this.rateVo)

  },
  methods: {
    toPage(url) {
      console.log(url);
      window.sessionStorage.setItem('activePath', url)
      this.$router.push(url)
    },
     getCompanySales(){
      getSalesByFactoryId().then(res => {
        if (res.flag) {
          // 将 data 对象转换为数组
          this.factoryInfoList = Object.keys(res.data).map(key => {
            return {
              name: key,
              value: res.data[key]
            };
          });
        }
      });
    }
    ,
    getData() {
      getHomeData({
        companyId: sessionStorage.companyId,
      }).then(res => {
        if (res.flag) {
          console.log(res);

          this.totalUserNum = res.data.totalUserNum
          this.usedScore = res.data.usedScore
          this.orderTotal = res.data.orderTotal
          this.orderNum = res.data.orderNum
          this.todayOrderNum = res.data.todayOrderNum
          this.todayOrderTotal = res.data.todayOrderTotal
          this.orderListAll = res.data.orderListAll
          this.promoUserListAll = res.data.promoUserListAll
          this.remainScore = res.data.remainScore
          this.usedMoney = res.data.usedMoney

          this.rateVo = []

          res.data.rateVo.forEach(item => {
            this.rateVo.push({
              name: item.categoryName,
              value: item.productNum
            })
          })

          this.orderWeekEchartsData.xData = []
          this.orderWeekEchartsData.yData = []
          for (var i in res.data.orderWeek) {
            this.orderWeekEchartsData.xData.push(i)
            this.orderWeekEchartsData.yData.push(res.data.orderWeek[i])
            console.log(i);
            console.log(res.data.orderWeek[i]);
          }

          this.userWeekEchartsData.xData = []
          this.userWeekEchartsData.yData1 = []
          this.userWeekEchartsData.yData2 = []
          this.userWeekEchartsData.yData3 = []
          for (var i in res.data.userWeek) {
            this.userWeekEchartsData.xData.push(i)
            this.userWeekEchartsData.yData1.push(res.data.userWeek[i][0])
            this.userWeekEchartsData.yData2.push(res.data.userWeek[i][1])
            this.userWeekEchartsData.yData3.push(res.data.userWeek[i][2])

          }

          console.log(this.userWeekEchartsData);



          // return

          this.getOrderEchart('orderCon', this.orderWeekEchartsData)
          this.getUserEchart('userCon', this.userWeekEchartsData)
          this.getSaleCharts('saleCon', this.rateVo)
          this.getCompanySales()

        
        }
      })
    },

    getOrderEchart(echartsId, data) {
      var myChart = this.$echarts.init(document.getElementById(`${echartsId}`))
      console.log(data);
      var option = {
        //在容器中的位置
        grid: {
          left: '3%',
          right: '3%',
          bottom: '8%',
          top: '20%',
          containLabel: true
        },
        //悬浮卡片
        tooltip: {
          trigger: 'axis',  //坐标轴触发
        },
        xAxis: {
          type: 'category',
          data: data.xData,
          minInterval: 1,
          axisLabel: {
            show: true,
            // rotate: 40,//35度角倾斜显示
            fontSize: 14,
            color: '#999'
          },
          //刻度相关配置：
          axisTick: {
            show: false,//去掉刻度
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
        },
        yAxis: {
          name: '订单数量',
          type: 'value',
          minInterval: 1,
          axisLabel: {
            show: true,
            fontSize: 14,
            color: '#999'
          },
          //隐藏y轴的横线
          splitLine: {
            show: true,
            lineStyle: {
              color: '#f2f2f2',
              // type: 'dashed'//虚线
            }
          },
          splitNumber: 9,  //设置y轴的间隔
          //刻度相关配置：
          axisTick: {
            show: false,//去掉刻度
            alignWithLabel: true, //刻度和值居中对齐
          },
          //轴线相关配置：
          axisLine: {
            show: false,  //去掉y轴的线
          },
        },
        series: [
          {
            name: '订单数量',
            data: data.yData,
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: {
              // 阴影部分
              shadowOffsetX: 0,
              shadowOffsetY: 15,
              shadowBlur: 5, // 折线模糊
              shadowColor: "rgba(145, 132, 132, 0.2)" //颜色
            },
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  colorStops: [
                    { offset: 0, color: "#EB5538" }, // 设置颜色渐变
                    { offset: 1, color: "#ECAF58" }
                  ]
                }
              },
              emphasis: {
                itemStyle: {
                  borderColor: "#dcdcdc",
                  borderWidth: 1,
                  shadowColor: "#ECA158",
                  shadowBlur: 10
                }
              }
            }
          }
        ],

      };

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    getUserEchart(echartsId, data) {
      var myChart = this.$echarts.init(document.getElementById(`${echartsId}`))
      console.log(data);
      var option = {
        //在容器中的位置
        grid: {
          left: '3%',
          right: '8%',
          bottom: '8%',
          top: '20%',
          containLabel: true
        },
        legend: {
          // x:"70%",
          // orient: 'vertical',
          y: "13%",
          x: '3%',
          icon: 'circle'
        },
        //悬浮卡片
        tooltip: {
          trigger: 'axis',  //坐标轴触发
        },
        yAxis: {

          type: 'category',
          data: data.xData,
          axisLabel: {
            show: true,
            // rotate: 40,//35度角倾斜显示
            interval: 0,
            fontSize: 14,
            color: '#999'
          },
          //刻度相关配置：
          axisTick: {
            show: false,//去掉刻度
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
        },
        xAxis: {
          type: 'value',
          minInterval: 1,
          axisLabel: {
            show: true,
            fontSize: 14,
            color: '#999'
          },
          //隐藏y轴的横线
          splitLine: {
            show: true,
            lineStyle: {
              color: '#f2f2f2',
              type: 'dashed'//虚线
            }
          },
          splitNumber: 9,  //设置y轴的间隔
          //刻度相关配置：
          axisTick: {
            show: false,//去掉刻度
            alignWithLabel: true, //刻度和值居中对齐
          },
          //轴线相关配置：
          axisLine: {
            show: false,  //去掉y轴的线
          },
        },
        series: [
          {
            name: '普通用户',
            data: data.yData1,
            type: 'bar',
            smooth: true,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  colorStops: [
                    { offset: 0, color: "#ECAF58" }, // 设置颜色渐变
                    { offset: 1, color: "#EB5538" }
                  ]
                }
              },
            }
          }, {
            name: '充值用户',
            data: data.yData2,
            type: 'bar',
            smooth: true,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  colorStops: [
                    { offset: 0, color: "#32CE76" }, // 设置颜色渐变
                    { offset: 1, color: "#02C094" }
                  ]
                }
              },
            }
          }, {
            name: '推广员',
            data: data.yData3,
            type: 'bar',
            smooth: true,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  colorStops: [
                    { offset: 0, color: "#ECD958" }, // 设置颜色渐变
                    { offset: 1, color: "#EBAA38" }
                  ]
                }
              },

            }
          }
        ],

      };

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    getSaleCharts(echartsId, data) {
      var myChart = this.$echarts.init(document.getElementById(`${echartsId}`))
      var Circularchart = {
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          top: '0%',
          containLabel: true
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "2%",
        },
        // color: ["#F72C5B", "#7dbcca", "#e9c66d", "#6fab72", "#d853d9"],
        series: [
          {
            type: "pie",
            radius: ["50%", "60%"],
            avoidLabelOverlap: false,
            label: {
              fontSize: 16,
              lineHeight: 20,
              position: "center",
              formatter: (params) => {
                // 设置默认显示第一个数据,函数接收一个参数，拿到所有配置项，遍历所有配置项，判断,下标为0的，第一个配置项信息，return 出去设置为默认值。
                console.log(params);
                if (params.dataIndex === 0) {
                  console.log(params.percent);
                  return ("{Proportiondefault|" + params.percent.toFixed(2) + "%}" + "\n{name|" + params.name + "}");
                } else {
                  return "";
                }
              },
              emphasis: {
                formatter: (params) => {    //切换非默认选项配置数据展示
                  if (params.dataIndex != 0) {
                    return ("{Proportiondefault|" + params.percent.toFixed(2) + "%}" + "\n{name|" + params.name + "}");
                  } else {
                    return;
                  }
                },
              },
              rich: {
                Proportion: {
                  //切换的数字参数配置
                  fontSize: 35,   //显示样式大小
                  backgroundColor: "white", //覆盖数据的背景
                },
                name: {
                  //切换的，name名字配置
                  color: "#999",
                  fontSize: 20,
                  lineHeight: 20,
                  backgroundColor: "white",
                },
                Proportiondefault: {
                  fontSize: 42,
                  lineHeight: 40,
                  backgroundColor: "white",
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      }

      myChart.setOption(Circularchart);
      window.addEventListener("resize", function () {
        myChart.resize();
      });


    },

    selectHandle(tag, flag) {
      if (tag == 'order') {
        this.orderFlag = flag
        if (flag == 0) {
          this.getOrderEchart('orderCon', this.orderWeekEchartsData)
        } else {
          if (this.orderMonthEchartsData.xData.length == 0) {
            this.getMonthOrder()
          } else {
            this.getOrderEchart('orderCon', this.orderMonthEchartsData)
          }
        }
      } else {
        this.userFlag = flag
        if (flag == 0) {
          this.getUserEchart('userCon', this.userWeekEchartsData)
        } else {
          if (this.userMonthEchartsData.xData.length == 0) {
            this.getMonthUser()
          } else {
            this.getUserEchart('userCon', this.userMonthEchartsData)
          }
        }

      }
    },

    getMonthOrder() {
      getHomeDataOrderMonth({ companyId: sessionStorage.companyId }).then(res => {
        if (res.flag) {
          this.orderMonthEchartsData.xData = []
          this.orderMonthEchartsData.yData = []
          for (var i in res.data) {
            this.orderMonthEchartsData.xData.push(i)
            this.orderMonthEchartsData.yData.push(res.data[i])
            console.log(i);
            console.log(res.data[i]);
          }
          this.getOrderEchart('orderCon', this.orderMonthEchartsData)
        }
      })
    },
    getMonthUser() {
      getHomeDataUserMonth({ companyId: sessionStorage.companyId }).then(res => {
        if (res.flag) {
          this.userMonthEchartsData.xData = []
          this.userMonthEchartsData.yData1 = []
          this.userMonthEchartsData.yData2 = []
          this.userMonthEchartsData.yData3 = []
          for (var i in res.data) {
            this.userMonthEchartsData.xData.push(i)
            this.userMonthEchartsData.yData1.push(res.data[i][0])
            this.userMonthEchartsData.yData2.push(res.data[i][1])
            this.userMonthEchartsData.yData3.push(res.data[i][2])
          }
          this.getUserEchart('userCon', this.userMonthEchartsData)
        }
      })

    },

    // 公司审核
    gsApplyHandle(obj) {
      // 根据id  获取信息
      this.applyType = obj.applyStatus
      this.applyFrom.applyId = obj.applyId
      this.applyFrom.companyId = sessionStorage.companyId
      this.applyFrom.userId = obj.userId

      if (this.applyType == 0) {
        this.getOwnUser(obj.userId)
      } else {
        this.submitApply()
      }
    },


    getOwnUser(id) {
      listMyUser({
        userId: id,
        flag: 2
      }).then(res => {
        if (res.flag) {
          this.applyDia = true
          this.userTotal = res.data.myUsers.length
          this.userVipTotal = 0
          res.data.myUsers.forEach(item => {
            if (item.vipLevel != 0) {
              this.userVipTotal += 1
            }
          })
          this.applyUserList = res.data.myUsers
        }
      })
    },
    // 通过申请
    submitApply() {
      this.$confirm('是否通过申请审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.applyType == 0) {
          //审核成为推广员通过
          applyPromoter(this.applyFrom).then(res => {
            if (res.flag) {
              this.$message.success('操作成功')
              this.getList();
              this.closeApplyDialog()
            }
          })
        } else {
          //审核离职通过
          PromoterDownApply(this.applyFrom).then(res => {
            if (res.flag) {
              this.$message.success('操作成功')
              this.getList();
              this.closeApplyDialog()
            }
          })
        }
      }).catch(() => {
      });

    },
    closeApplyDialog() {
      this.applyDia = false
    },

  },
  created() {
    this.getData()
  }
};
</script>

<style scoped>
.dis {
  display: flex;
  align-items: center;
}

.topCon {
  display: flex;
  justify-content: space-between;
  width: 100%;

}

.dataItem {
  position: relative;
  box-sizing: border-box;
  padding: 24px 24px 0;
  align-items: flex-start;
  flex-direction: column;
  width: 308px;
  height: 188px;
  background: #FFFFFF;
  box-shadow: 0px 1px 6px 0px rgba(72, 97, 117, 0.15);
  border-radius: 10px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  font-size: 20px;
  color: #333333;
}

.dataItem>img {
  position: absolute;
  bottom: 0px;
  left: 24px;
}

.dataItem>div>span {
  font-size: 32px;
}

.bigImg {
  width: 260px;
  height: 86px;
}

.smallImg {
  width: 260px;
  height: 38px;
}

.mainCon {
  margin-top: 24px;
  display: flex;
  width: 100%;
}

.leftCon {
  margin-right: 20px;
  width: 1110px;
  height: 100%;
}

.rightCon {
  flex: 1;
  height: 100%;
}

.orderBox {
  position: relative;
  width: 1110px;
  height: 560px;
  background: #FFFFFF;
  box-shadow: 0px 1px 6px 0px rgba(72, 97, 117, 0.15);
  border-radius: 10px;
}

.echartsTop {
  position: absolute;
  top: 30px;
  box-sizing: border-box;
  padding: 0px 50px 0 40px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  font-family: Microsoft YaHei;
  font-weight: bold;
  font-size: 20px;
  color: #333333;
  z-index: 3000;
}

.echartsTop>div {
  cursor: pointer;
}

.echartsTop>div>span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 40px;
  border-radius: 0px 4px 4px 0px;
  border: 1px solid #DEE7ED;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 20px;
  color: #999999;
  cursor: pointer;
}


.activeSpan {
  background: #E6FAFA;
  border-radius: 4px 0px 0px 4px;
  border: 1px solid #43C9C9;
  font-family: Microsoft YaHei;
  font-weight: bold;
  font-size: 20px;
  color: #43C9C9 !important;
}

#orderCon {
  width: 1110px;
  height: 560px;
}

#userCon {
  width: 1110px;
  height: 678px;
}

.userBox {
  position: relative;
  margin-top: 20px;
  width: 1110px;
  height: 678px;
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #EEEEEE;
}

.messTop {
  width: 100%;
  font-family: Microsoft YaHei;
  font-weight: bold;
  font-size: 20px;
  color: #333333;
}

.messTab {
  margin-top: 18px;
  width: 100%;
  flex: 1;
  /* background: aquamarine; */
}

.messageBox {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 24px 44px 28px 24px;
  margin-bottom: 20px;
  width: 100%;
  height: 386px;
  background: #FFFFFF;
  box-shadow: 0px 1px 6px 0px rgba(72, 97, 117, 0.15);
  border-radius: 10px;
}

.saleBox {
  box-sizing: border-box;
  padding: 24px 44px 28px 24px;
  margin-bottom: 20px;
  width: 100%;
  height: 490px;
  background: #FFFFFF;
  box-shadow: 0px 1px 6px 0px rgba(72, 97, 117, 0.15);
  border-radius: 10px;
}

#saleCon {
  width: 100%;
  height: 100%;
}

.orderListBox {
  box-sizing: border-box;
  padding: 0px 44px 28px 24px;
  width: 100%;
  height: 342px;
  background: #FFFFFF;
  box-shadow: 0px 1px 6px 0px rgba(72, 97, 117, 0.15);
  border-radius: 10px;
  overflow-y: scroll;
}

.orderListBox>div {
  margin-bottom: 12px;
  width: 100%;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
  color: #999999;
}

.orderListBox>div:first-child {
  margin-bottom: 0px !important;
  padding: 24px 0 22px;
  position: sticky;
  top: 0px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  font-size: 20px;
  color: #333333;
  background: #fff;
}

.orderListBox>div>span {
  margin-right: 8px;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #43C9C9;
  border-radius: 50%;
}

.checkBtn {
  font-family: Microsoft YaHei;
  font-weight: 400;
  /* font-size: 16px; */
  color: #02C094;
  cursor: pointer;
}


.tipBox>span {
  display: inline-block;
  margin: 0 16px 16px 0;
}

.tipBox>span>span {
  font-size: 18px;
  color: #EF5931;
}
</style>
